<template>
  <!-- 厂商商品选购页 -->
  <div class="manufacturer-order-detail">
    <div class="manufacturer-shopping-header">
      <div class="manufacturer-shopping-title">
        {{orderDetailObj.warehouseName}}
      </div>
    </div>
    <div class="manufacturer-shopping-main">
      <comHeaderAddress v-if="isShowComHeaderAddress" ref="comHeaderAddressRef" @callback="callback"></comHeaderAddress>
      <div class="manufacturer-shopping-table">
        <div class="manufacturer-shopping-thead">
          <div class="thead-item one">
            商品信息
          </div>
          <div class="thead-item two">
            数量
          </div>
          <div class="thead-item three">
            单价
          </div>
        </div>
        <div class="manufacturer-shopping-tbody" :style="{'height': orderDetailObj.canCancel ? 'calc(100vh - 5.16rem)' : 'calc(100vh - 3.83rem)' }">
          <div class="tbody-list">
            <div class="tbody-item" v-for="item in orderDetailObj.wares" :key="item.shopOrderDetailId">
              <div class="tbody-item-coloum one">
                <div class="shopping-name">
                  {{item.categoryName}}
                </div>
                <div class="shopping-info">
                  <div class="brandName">
                    {{item.brandName}}
                  </div>
                  <div class="partItemName lusir-common_cursor" @click.stop="handleClickPartItemDetail(item)">
                    {{item.displayPartsNo}}
                  </div>
                  <div class="seriesName" v-if="item.seriesName">
                    {{item.seriesName}}
                  </div>
                </div>
                <div class="shoppingTradeName">
                  {{item.otherCodes}}
                </div>
              </div>
              <div class="tbody-item-coloum two">
                {{item.count}}
              </div>
              <div class="tbody-item-coloum three">
                ¥{{item.price_text}}
              </div>
            </div>
          </div>
          <div class="order-total-info">
            <div class="first">
              <div class="shopNum">
                共{{orderDetailObj.wareCount}}件商品
              </div>
              <div class="price">
                合计：
                <span class="fuhao">¥</span>
                <span class="jine">{{orderDetailObj.wareAmount_text}}</span>
              </div>
            </div>
            <div v-if="orderDetailObj.promotions.length > 0" class="second" v-for="(promotionItem, promotionIndex) in orderDetailObj.promotions" :key="promotionIndex">
              <div class="label">{{promotionItem.promotionName}}：</div>
              <div class="content">-¥{{promotionItem.reduceAmunt_text}}</div>
            </div>
            <div class="third">
              <div class="label">实际支付：</div>
              <div class="content">
                <span class="fuhao">¥</span>{{orderDetailObj.payableAmount_text}}</div>
            </div>
          </div>
          <div class="order-detail-info">
            <div class="detail-info-item">
              <div class="lusir_common_textLabel">
                订单编号：
              </div>
              <div class="lusir_common_textContent">
                {{orderDetailObj.shopOrderCode}}
              </div>
            </div>
            <div class="detail-info-item">
              <div class="lusir_common_textLabel">
                创建时间：
              </div>
              <div class="lusir_common_textContent">
                {{orderDetailObj.createTime_text}}
              </div>
            </div>
            <div class="detail-info-item">
              <div class="lusir_common_textLabel">
                订单状态：
              </div>
              <div class="lusir_common_textContent">
                {{orderDetailObj.orderStatus_text}}
              </div>
            </div>
          </div>
          <div class="order-detail-guide">
            您可以在对话页，发送“查看订单”，查看历史订单
          </div>
        </div>
      </div>
    </div>
    <div class='lusir-common-footer-close-view' v-if="orderDetailObj.canCancel">
      <div class="close-btn spaceHalf lusir-common_cursor" @click="navigateBackFn" v-show="false">关闭</div>
      <div class="returnGoodsBtn lusir-common_cursor" v-if="orderDetailObj.canCancel" @click="cancelOrder()">取消订单</div>
    </div>
  </div>
</template>

<script>
import comHeaderAddress from "@/components/com-header-address";
import { mapState, mapGetters } from "vuex";
export default {
  data() {
    return {
      param_id: this.$com_util.getQueryString("id"),
      orderDetailObj: {}, // 购物车的大集合
      isShowComHeaderAddress: false,
    };
  },
  created() {
    this.getConsultantShopOrderDetail();
  },
  computed: {
    ...mapState({
      // 获取当前会话
      currentConversation: state => {
        return state.conversation.currentConversation;
      },
    })
  },
  methods: {
    // 取消订单
    cancelOrder(item) {
      this.$wx.toast("功能完善中，敬请期待");
    },
    // 报价详情
    handleClickPartItemDetail(item) {
      let partItemDetailDialog_initMode = "partItemInfo";
      let partItemDetailDialog_input = {
        partItemId: item.partItemId
      };
      let requestData = {
        partItemDetailDialog_initMode,
        partItemDetailDialog_input
      };
      this.$router.push({
        name: "partItemDetail",
        params: {
          requestData: JSON.stringify(requestData),
        },
      });
    },
    navigateBackFn() {
      wx.navigateBack({ delta: 1 });
    },
    callback() {
      this.getConsultantShopOrderDetail();
    },
    // 取得订单详情
    async getConsultantShopOrderDetail() {
      const res = await this.$imServive({
        url: "/IMConsultant/GetConsultantShopOrder",
        data: {
          shopOrderId: this.param_id, // 全部 = 0, 待处理 = 1
        }
      });
      this.isShowComHeaderAddress = true;
      this.orderDetailObj = res;

      let ConsigneeProps = {
        ConsigneeName: res.shopCustomerName, //收货人名称
        ConsigneeMobile: res.shopCustomerMobile, //收货人手机
        ConsigneeAddress: res.shopCustomerTeamAddress, //收货人地址
        CompanyName: res.shopCustomerTeamName, //收货人公司
      };

      let propsObj = {
        params: ConsigneeProps,
        command: 'auto_launch', // command  'auto_launch'校验信息自动打开弹层    'none' 不用校验
      }
      setTimeout(() => {
        this.$refs.comHeaderAddressRef.active(propsObj);
      }, 500);
    },

  },
  components: {
    comHeaderAddress,
  }
};
</script>

<style lang="stylus">
.manufacturer-order-detail
  height 100vh
  overflow-y scroll
  border-top 1px solid #e0e0e0
  .manufacturer-shopping-header
    padding 0 0.4rem
    background-image url('https://c1.zhipeicloud.com/cangpei_mini/images/pic_topBG.png') // c1.zhipeicloud.com/cangpei_mini/images/pic_topBG.png') // c1.zhipeicloud.com/cangpei_mini/images/pic_topBG.png') // c1.zhipeicloud.com/cangpei_mini/images/pic_topBG.png') // c1.zhipeicloud.com/cangpei_mini/images/pic_topBG.png') // c1.zhipeicloud.com/cangpei_mini/images/pic_topBG.png') // c1.zhipeicloud.com/cangpei_mini/images/pic_topBG.png') // c1.zhipeicloud.com/cangpei_mini/images/pic_topBG.png') // c1.zhipeicloud.com/cangpei_mini/images/pic_topBG.png')
    background-size 100vw 2.4rem
    background-position center center
    box-sizing border-box
    width 100vw
    height 2.4rem
    .manufacturer-shopping-title
      height 1.12rem
      width 100%
      font-weight 500
      color #181818
      display flex
      align-items center
  .manufacturer-shopping-main
    background-color #ecedee
    border-radius 0.32rem 0.32rem 0 0
    position absolute
    top 1.12rem
    left 0
    width 100vw
    overflow hidden
    height calc(100vh - 1.12rem)
    .manufacturer-shopping-table
      .manufacturer-shopping-thead
        background-color #fff
        border-bottom 1px solid #f2f2f2
        display flex
        align-items center
        padding 0 0.39rem
        .thead-item
          box-sizing border-box
          padding 0.25rem 0 0.27rem
          color #999
          font-size 0.32rem
          display flex
          align-items center
        .one
          width 5.36rem
          box-sizing border-box
        .two
          width 1.47rem
          justify-content center
        .three
          width 2.4rem
          justify-content center
    .manufacturer-shopping-tbody
      overflow auto
      .tbody-list
        display flex
        align-items center
        flex-direction column
        padding 0 0.39rem
        background-color #fff
      .tbody-item
        display flex
        align-items center
        border-bottom 1px solid #f2f2f2
      .tbody-item-coloum
        display flex
        flex-direction column
        align-items center
        justify-content center
        padding 0.32rem 0 0.31rem
        box-sizing border-box
      .one
        width 5.36rem
        align-items flex-start
        box-sizing border-box
        max-width 5.38rem
        overflow hidden
        .shopping-name
          font-size 0.4rem
          color #4c4c4c
          line-height 0.64rem
        .shopping-info
          margin 0.2rem 0 0.05rem
          line-height 0.64rem
          display flex
          align-items flex-start
          flex-wrap wrap
          .brandName
            color #5b5b5b
            font-size 0.36rem
          .partItemName
            margin-left 0.16rem
            font-size 0.36rem
            color #377de8
            word-break break-all
          .seriesName
            font-size 0.28rem
            line-height 0.4rem
            background #fab220
            margin-left 0.16rem
            padding 1px 0.13rem
            border-radius 0.16rem 0.04rem
            color #ffffff
            word-break break-all
        .shoppingTradeName
          font-size 0.32rem
          color #ff9000
          line-height 0.56rem
          word-break break-all
      .two
        width 1.47rem
        align-items center
        color #e74c3c
        font-size 0.4rem
      .three
        width 2.4rem
        align-items center
        font-size 0.4rem
        color #e74c3c
      .order-detail-info
        padding 0.24rem 0.39rem
        width 100%
        box-sizing border-box
        background-color #fff
        margin-top 0.32rem
        .detail-info-item
          width 100%
          height 0.72rem
          display flex
          align-items center
          .lusir_common_textLabel
            font-size 0.36rem
            color #8e8e8e
          .lusir_common_textContent
            font-size 0.36rem
            color #5b5b5b
      .order-detail-guide
        height 1.08rem
        background-color #ecedee
        width 100%
        display flex
        justify-content center
        align-items center
        font-size 0.32rem
        color #acacac
      .order-total-info
        background #fff
        padding 0.4rem 0.4rem
        .first
          display flex
          justify-content flex-end
          align-items center
          height 0.56rem
          font-size 0.32rem
          color #5b5b5b
          line-height 0.56rem
          .price
            font-size 0.36rem
            color #5b5b5b
          .shopNum
            font-size 0.32rem
            color #5b5b5b
        .second
          display flex
          justify-content flex-end
          align-items center
          height 0.56rem
          font-size 0.32rem
          color #5b5b5b
          line-height 0.56rem
          margin-top 0.28rem
          .content
            font-size 0.36rem
            color #1abc9c
        .third
          margin-top 0.41rem
          display flex
          justify-content flex-end
          align-items center
          height 0.56rem
          font-size 0.32rem
          color #5b5b5b
          line-height 0.56rem
          .content
            font-size 0.48rem
            font-weight 600
            color #e74c3c
            .fuhao
              font-size 0.32rem
              font-weight 600
              color #e74c3c
  .lusir-common-footer-close-view
    position relative
    width 100%
    height 1.33rem
    position fixed
    left 0
    bottom 0
    display flex
    align-items center
    justify-content center
    background-color #fff
    z-index 1
    border-top 1px solid #cbd4e1
    box-sizing border-box
    .close-btn
      width 2.24rem
      height 0.8rem
      background #ffffff
      border 1px solid #e74c3c
      border-radius 39px
      font-size 0.4rem
      color #e74c3c
      display flex
      align-items center
      justify-content center
  .returnGoodsBtn
    position absolute
    right 0.24rem
    top 50%
    transform translateY(-50%)
    font-size 0.36rem
    color #377de8
.com-header-address
  display flex
  align-items center
  height 1.44rem
  background #ffffff
  box-shadow 0 1px 0 0 #cbd4e1
  margin-bottom 0.32rem
  .address-view
    padding 0.16rem 0.4rem
    box-sizing border-box
    display flex
    align-items center
    width 100%
    height 100%
  .address-info
    width 100%
    max-width 9.2rem
    box-sizing border-box
    height 100%
    .userInfo
      height 0.56rem
      display flex
      align-items center
      .address-icon
        width 0.35rem
        height 0.4rem
      .username
        font-size 0.32rem
        color #282828
        margin-left 0.16rem
      .mobile
        font-size 0.32rem
        color #8e8e8e
        margin-left auto
    .address-text
      font-size 0.32rem
      color #8e8e8e
      width 100%
      text-overflow ellipsis
      white-space nowrap
      padding-left 0.51rem
      overflow hidden
      box-sizing border-box
</style>

